<template>
  <div>
    <el-dialog
      :title="mode === 'add' ? '新增导航' : '编辑导航'"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
      width="850px"
      @close="close"
    >
      <el-form
        ref="form"
        v-loading="loading"
        :model="form"
        :rules="rules"
        label-width="100px"
        label-suffix="："
        size="small"
      >
        <el-form-item label="导航名称" prop="title">
          <el-input
            v-model="form.title"
            maxlength="4"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="导航图标" class="is-required">
          <div class="upload-container">
            <el-form-item prop="selectedIcon" class="cell-item">
              <div class="icon-type">选中图标</div>
              <el-upload
                :action="imageUploadUrl"
                :show-file-list="false"
                :headers="{ 'X-BUSINESS-TOKEN': $store.state.user.token }"
                :before-upload="handleIconBefore"
                :on-success="
                  (res, file) => {
                    return handleIconSuccess(res, file, 'selectedIcon');
                  }
                "
                class="app-uploader-img-plus"
              >
                <img
                  v-if="form.selectedIcon"
                  :src="fileBaseUrl + form.selectedIcon"
                  class="img"
                >
                <i v-else class="el-icon-plus" />
              </el-upload>
            </el-form-item>
            <el-form-item prop="icon" class="cell-item">
              <div class="icon-type">未选中图标</div>
              <el-upload
                :action="imageUploadUrl"
                :show-file-list="false"
                :headers="{ 'X-BUSINESS-TOKEN': $store.state.user.token }"
                :before-upload="handleIconBefore"
                :on-success="
                  (res, file) => {
                    return handleIconSuccess(res, file, 'icon');
                  }
                "
                class="app-uploader-img-plus"
              >
                <img
                  v-if="form.icon"
                  :src="fileBaseUrl + form.icon"
                  class="img"
                >
                <i v-else class="el-icon-plus" />
              </el-upload>
            </el-form-item>
          </div>
          <div style="font-size: 12px">只能上传jpg/png/gif文件，建议像素100 * 100，且不超过50KB</div>
          <!--          <div class="upload-tips">-->
          <!--            <div>只能上传jpg/png文件，且不超过50kb</div>-->
          <!--          </div>-->
        </el-form-item>

        <!-- 首页不可选 -->
        <!-- <div v-if="form.openType==='INSIDE'&&form.openInsidePage==='homepage'">
          <el-form-item label="站内链接" prop="title">{{form.openInsideParams.remark}}</el-form-item>
        </div>-->

        <!-- <div v-else> -->
        <div>
          <!-- <el-form-item label="跳转链接" prop="openType">
            <el-radio-group v-model="form.openType" size="small">
              <el-radio-button label="INSIDE">站内链接</el-radio-button>
            </el-radio-group>
          </el-form-item>-->
          <el-form-item
            v-if="form.openType === 'INSIDE'"
            label="站内链接"
            prop="openInsidePage"
          >
            <el-button size="small" @click="openInsideLink">选择链接</el-button>
            <div>{{ form.openInsideParams.remark }}</div>
          </el-form-item>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" round @click="hide">取 消</el-button>
        <el-button
          size="small"
          round
          type="primary"
          @click="submit"
        >确 定
        </el-button>
      </div>
    </el-dialog>

    <!-- 站内链接 -->
    <DialogInsideLink ref="insideLink" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { imgUploadUrl } from '@/api/upload'
// import DialogInsideLink from "../DialogInsideLink";
import DialogInsideLink from '@/views/wxaBuildModule/views/components/DialogInsideLink'

export default {
  components: {
    DialogInsideLink
  },
  data() {
    return {
      // 表单校验相关
      rules: {
        title: [
          {
            required: true,
            message: '请输入导航名称',
            trigger: ['blur', 'change']
          }
        ],
        icon: [
          {
            required: true,
            message: '请上传未选中图标',
            trigger: ['blur', 'change']
          }
        ],
        selectedIcon: [
          {
            required: true,
            message: '请上传选中图标',
            trigger: ['blur', 'change']
          }
        ],
        openType: [
          {
            required: true,
            message: '请选择跳转链接类型',
            trigger: ['blur', 'change']
          }
        ],
        openInsidePage: [
          {
            required: true,
            message: '请选择站内链接',
            trigger: ['blur', 'change']
          }
        ]
      },
      // 配置
      resolve: null,
      reject: null,
      imageUploadUrl: imgUploadUrl,
      // 状态
      loading: false,
      dialogVisible: null,
      // 数据
      classifyCode: 'DEFAULT',
      mode: 'add',
      form: {
        icon: '',
        openInsidePage: '',
        openInsideParams: '',
        openMode: '',
        openPath: '',
        openType: 'INSIDE',
        selectedIcon: '',
        title: ''
      }
    }
  },
  watch: {
    // "form.openPath"(newValue, oldValue) {
    //   if (newValue) this.$refs.form.clearValidate(["openPath"]);
    // },
  },
  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  methods: {
    /**
     * 弹框相关
     */
    open({ mode = 'add', row = '' }) {
      this.mode = mode
      if (mode === 'edit' && row) {
        this.form = Object.assign({}, row)
      }
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    close() {
      this.loading = false
      this.form = {
        icon: '',
        openInsidePage: '',
        openInsideParams: '',
        openMode: '',
        openPath: '',
        openType: 'INSIDE',
        selectedIcon: '',
        title: ''
      }
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    /**
     * 数据组
     */

    /**
     * 按钮组
     */
    // 打开选择链接
    openInsideLink() {
      const params = {
        insideParams: this.form.openInsideParams,
        insidePage: this.form.openInsidePage
      }

      console.log(params)
      this.$refs.insideLink.open({ row: params }).then((res) => {
        this.form.openInsidePage = res.insidePage
        this.form.openInsideParams = res.insideParams
        this.form.openMode = res.mode
        this.form.openPath = res.path
        this.$refs.form.clearValidate(['openPath'])
      })
    },

    // 确 定
    submit() {
      console.log(this.form)
      this.$refs.form.validate((valid) => {
        if (valid) {
          const params = Object.assign({}, this.form)
          this.resolve && this.resolve(params)
          this.hide()
        }
      })
    },

    // 上传图标之前
    handleIconBefore(file) {
      return this.beforeUploadImg(file, this, 0, 0, 0.05, ['JPG', 'PNG', 'GIF'])
    },

    // 上传图标成功
    handleIconSuccess(res, file, type) {
      if (res.code === 0) {
        this.form[type] = res.data.path
        this.$refs.form.clearValidate([type])
      } else {
        this.$message.error(res.msg)
      }
    }

    /**
     * 状态组
     */

    /**
     * 方法组
     */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 上传图片 */
.upload-container {
  display: flex;

  .cell-item {
    width: 100px;
    margin-right: 20px;
  }

  .icon-type {
    text-align: center;
  }

  .app-uploader-img-plus {
    width: 100px;
    height: 100px;

    .el-icon-plus {
      font-size: 36px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }

    .img {
      width: 100px;
      height: 100px;
      display: block;
    }
  }
}
</style>
